<template>
  <div class="card">
    <div class="header"></div>
    <slot></slot>

    <div class="footer"></div>
  </div>
</template>

<script>
export default {
  name: 'Card',
}
</script>

<script setup>
</script>

<style scoped lang="scss">
  .card {
    height: 170px;
    border: 1px solid $border-color-1;
    position: relative;
    margin-bottom: 10px;
    .header {
      &::before {
        content: '';
        width: 8px;
        height: 8px;
        border-left: 1px solid $border-color-2;
        border-top: 1px solid $border-color-2;
        position: absolute;
        left: 0;
        top: 0;
      }
      &::after {
        content: '';
        width: 8px;
        height: 8px;
        border-right: 1px solid $border-color-2;
        border-top: 1px solid $border-color-2;
        position: absolute;
        right: 0;
        top: 0;
      }
    }

    .footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      &::before {
        content: '';
        width: 8px;
        height: 8px;
        border-left: 1px solid $border-color-2;
        border-bottom: 1px solid $border-color-2;
        position: absolute;
        left: 0;
        bottom: 0;
      }
      &::after {
        content: '';
        width: 8px;
        height: 8px;
        border-right: 1px solid $border-color-2;
        border-bottom: 1px solid $border-color-2;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
</style>
